<template>
  <div id = 'login'>
    <div id= 'loginForm'>
      <Form :model="formData" :rules="rules" ref="formRef">
        <FormItem>
            <div id = 'formTitle'>后台管理系统</div>
        </FormItem>
        <FormItem id = 'account' prop="account">
            <Input v-model="formData.account" placeholder="请输入账号"></Input>
        </FormItem>
        <FormItem id = 'password' prop="password">
            <Input v-model="formData.password" placeholder="请输入密码" type="password"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="submit('formRef')" long id = 'submit'>登录</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>

<script>
import api from '../../../api'
// import $ from 'jquery'
export default {
  data () {
    return {
      formData: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submit (name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          let result = await api.login(this.formData)
          console.log(result)
        } else {
          return false
        }
      })
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
*{
  padding:0;
  margin:0
}
#login {
    /* 解决背景图片同步缩放问题 */
    position:fixed;
    width:100%;
    height:100%;
    background:url('/static/img/system/bj.jpg') no-repeat center;
    background-size:cover;
}
#loginForm {
    position: fixed;
    width:350px;
    height:280px;
    top:50%;
    left:50%;
    background-color: rgba(255,255,255, .6);
    margin:-175px 0 0 -140px;
    padding:40px;
    border-radius: 5px;
}
#account{
  margin-top:20px
}
#password{
  margin-top:20px
}
#submit{
  height:30px;
  margin-top:20px
}
#formTitle{
  text-align:center;
  font-size:20px;
}
</style>
